<!DOCTYPE html>
<html lang="zc-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/news.css">
</head>

<body>
    <div id="news-list">
        <!-- 新闻的 item 项 -->
        
    </div>
    <script src="./assets/axios.js"></script>
    <script>
        //获取元素
        const newList = document.querySelector('#news-list');
        //声明一个渲染函数
        const renderNewList=()=> {
            axios({url:'http://ajax-api.itheima.net/api/news'}).then(({data:res})=> {
                const {data} = res
                newList.innerHTML = data.map((item)=> {
                    console.log(item);
                    return `
                    <div class="news-item">
            <img class="thumb" src="${item.img}" alt="" />
            <div class="right-box">
                <!-- 新闻标题 -->
                <h1 class="title">${item.title}</h1>
                <div class="footer">
                    <div>
                        <!-- 新闻来源 -->
                        <span>${item.source}</span>&nbsp;&nbsp;
                        <!-- 发布日期 -->
                        <span>${item.time}</span>
                    </div>
                    <!-- 评论数量 -->
                    <span>评论数：${item.cmtcount}</span>
                </div>
            </div>
        </div>
                    `
                }).join('')
            })
        }
        renderNewList()
    </script>
</body>

</html>